{% extends 'dms_console.html' %}

{% block stylecontent %}
    <style>
        .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
    </style>
{% endblock %}

{% block maincontent %}
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <form class="layui-form">
                    <div class="layui-form-item">
                        {# HTML-查询-业务字段 #}
                        <div class="layui-inline"><label class="layui-form-label">事情</label>
                            <div class="layui-input-inline" style="width: 150px;"><input type="text" id="event"
                                                                                         name="event" placeholder="事情"
                                                                                         class="layui-input"
                                                                                         lay-affix="clear"></div>
                        </div>
                        <div class="layui-inline"><label class="layui-form-label">菜单在界面的位置</label>
                            <div class="layui-input-inline" style="width: 150px;"><input type="text" id="saas_location"
                                                                                         name="saas_location"
                                                                                         placeholder="菜单在界面的位置"
                                                                                         class="layui-input"
                                                                                         lay-affix="clear"></div>
                        </div>
                        <div class="layui-inline"><label class="layui-form-label">操作</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <select id="operation" name="operation">
                                    <option value="删除" selected>删除</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline"><label class="layui-form-label">在公服平台修改</label>
                            <div class="layui-input-inline" style="width: 150px;"><input type="text" id="jalor_location"
                                                                                         name="jalor_location"
                                                                                         placeholder="在公服平台修改"
                                                                                         class="layui-input"
                                                                                         lay-affix="clear"></div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label">责任人</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" id="principal" name="principal" placeholder="责任人"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">上线日期</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <select id="online_date" name="online_date" lay-search>
                                    <option value="">直接或搜索选择</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">创建人</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" id="created_by" name="created_by" placeholder="创建人"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" lay-submit
                                    lay-filter="formSearch"
                                    id="btnSearch">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                            </button>
                            <button class="layui-btn layuiadmin-btn-list layui-btn-primary" type="reset"
                                    id="customReset">
                                <i class="layui-icon layui-icon-set-sm layuiadmin-button-btn"></i>重置
                            </button>
                            <button class="layui-btn layuiadmin-btn-list layui-btn-normal"
                                    id="exportAllBtn"
                                    lay-submit lay-filter="export">
                                <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出
                            </button>
                            <button class="layui-btn layui-btn-normal layuiadmin-btn-list" type="button"
                                    id="addBtn">
                                <i class="layui-icon layui-icon-add-circle-fine layuiadmin-button-btn"></i>添加
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">
                <table id="catalogDeleteTableId" lay-filter="catalogDeleteTableLayFilter"></table>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <!-- 添加/编辑表单模板 -->
    <script type="text/html" id="catalogDeleteFormId">
        <form class="layui-form" lay-filter="catalogDeleteFormLayFilter" style="padding:20px">
            <input type="hidden" name="catalog_delete_id">
            {# HTML-新增模板-业务字段 #}
            <div class="layui-form-item"><label class="layui-form-label">事情</label>
                <div class="layui-input-inline"><input type="text" name="event" id="event" lay-verify="required"
                                                       placeholder="请输入事情" autocomplete="off" class="layui-input"
                                                       style="width:300px;"></div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">菜单在界面的位置</label>
                <div class="layui-input-inline"><input type="text" name="saas_location" id="saas_location"
                                                       lay-verify="required" placeholder="请输入菜单在界面的位置"
                                                       autocomplete="off" class="layui-input" style="width:300px;">
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">操作</label>
                <div class="layui-input-inline">
                    <select id="operation" name="operation" style="width:300px;">
                        <option value="删除" selected>删除</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">在公服平台修改</label>
                <div class="layui-input-inline"><input type="text" name="jalor_location" id="jalor_location"
                                                       lay-verify="required" placeholder="请输入在公服平台修改"
                                                       autocomplete="off" class="layui-input" style="width:300px;">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">责任人</label>
                <div class="layui-input-inline">
                    <input type="text" name="principal" id="principal" lay-verify="required"
                           placeholder="请输入责任人"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上线日期</label>
                <div class="layui-input-inline">
                    <select name="online_date_template" id="online_date_template" lay-verify="required" lay-search>
                        <option value="">直接选择或搜索选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述或备注</label>
                <div class="layui-input-inline">
                    <textarea name="comment" id="comment" placeholder="请输入你想描述或备注的信息(非必填)"
                              class="layui-textarea" style="width:300px;"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="width: 146px; margin: 0 auto;">
                <div class="layui-input-inline">
                    <button class="layui-btn" id="submitBtn" lay-submit lay-filter="formSubmit">提交</button>
                    <button type="button" class="layui-btn" id="closeWindowsBtn">关闭</button>
                </div>
            </div>
        </form>
    </script>

    <!-- 操作列模板 -->
    <script type="text/html" id="catalogDeleteBarOption">
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
    </script>

    <script>
        layui.use(['table', 'layer', 'form'], function () {
            // var $ = layui.jquery;
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            // 初始化时加载下拉框数据
            $.ajax({
                url: '/dms/api/getCatalogDeleteOnlineDate',
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var html = '<option value="">直接或搜索选择</option>';
                        $.each(res.data, function (index, item) {
                            html += '<option value="' + item.online_date + '">' + item.online_date + '</option>';
                        });
                        $('#online_date').html(html);
                        $('#online_date_template').html(html);
                        // 重新渲染表单
                        form.render('select');
                    }
                },
                error: function () {
                    layer.msg('数据加载失败');
                }
            });

            // 初始化表格 - 国际化
            var catalogDeleteTableIns = table.render({
                elem: '#catalogDeleteTableId',
                url: '/dms/api/catalogDelete',
                method: 'get',
                page: true,
                css: [ // 设置单元格样式
                    // 取消默认的溢出隐藏，并设置适当高度
                    // '.layui-table-cell{height: 50px; line-height: 40px;}',
                    '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
                    '.layui-table-cell select{height: 36px; padding: 0 5px;}'
                ].join(''),
                height: 650,
                cols: [[
                    {field: 'catalog_delete_id', title: 'ID', width: 80, align: 'center', fixed: 'left'},
                    // HTML - 初始化表格 - 业务字段
                    {field: 'event', title: '事情', width: 300, align: 'left', edit: 'textarea'},
                    {field: 'saas_location', title: '菜单在界面的位置', width: 150, align: 'left', edit: 'text'},
                    {field: 'operation', title: '操作', width: 150, align: 'left'},
                    {field: 'jalor_location', title: '在公服平台修改', width: 150, align: 'left', edit: 'text'},

                    {field: 'principal', title: '责任人', width: 130, edit: 'text', align: 'center'},
                    {field: 'online_date', title: '上线日期', width: 110, edit: 'text', align: 'center'},
                    {field: 'comment', title: '备注', width: 110, edit: 'text', align: 'left'},
                    {field: 'last_updated_by', title: '更新人IP', width: 120, align: 'left'},
                    {field: 'last_update_date', title: '更新时间', width: 170, align: 'left'},
                    {field: 'created_by', title: '创建人IP', width: 120, align: 'left'},
                    {field: 'creation_date', title: '创建时间', width: 170, align: 'left'},
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 100,
                        minWidth: 70,
                        align: 'center',
                        toolbar: '#catalogDeleteBarOption'
                    }
                ]],
                done: function (res, curr, count) {
                    $(".layui-table-main tr").each(function (index, val) {
                        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                }
            });

            // 绑定表单提交事件。点击搜索按钮，提交表单
            form.on('submit(formSearch)', function (data) {
                catalogDeleteTableIns.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            // 监听单元格编辑
            table.on('edit(catalogDeleteTableLayFilter)', function (obj) {
                const field = obj.field;
                const value = obj.value;
                const row = obj.data;
                if (field === 'language' && value !== 'zh_CN' && value !== 'en_US') {
                    layer.msg('更新失败，language应该为“zh_CN”或者“en_US”，不能为其他值！', {
                        icon: 0, // 使用 icon:0 显示为感叹号图标
                        skin: 'layui-layer-danger', // 使用 layui-layer-molv 作为警告风格背景
                        time: 3000 // 显示时间为3秒
                    });
                    catalogDeleteTableIns.reload();
                } else if (field === 'online_date') {
                    // 监听上线日期输入的值，是否不在系统设定里面
                    const selectBox = document.getElementById('online_date');
                    const options = selectBox.querySelectorAll('option');
                    let found = false;
                    // 遍历所有 option，检查 value 或 text 是否匹配（忽略大小写）
                    for (let i = 0; i < options.length; i++) {
                        const option = options[i];
                        if (
                            option.value === value ||
                            option.text === value
                        ) {
                            found = true;
                            break;
                        }
                    }
                    // 显示结果
                    if (found) {
                        // 发送更新请求
                        $.ajax({
                            url: '/dms/api/catalogDeleteUpdate',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify({
                                id: row.catalog_delete_id,
                                field: field,
                                value: value
                            }),
                            success: function (res) {
                                if (res.status !== 'success') {
                                    layer.msg('更新失败: ' + res.message);
                                    // 恢复原值
                                    catalogDeleteTableIns.reload();
                                } else {
                                    layer.msg('更新成功!');
                                    catalogDeleteTableIns.reload();
                                }
                            }
                            , error: function (xhr, status, error) {
                                layer.msg('Error: ' + xhr.status + ' ' + xhr.statusText);
                                catalogDeleteTableIns.reload();
                            }
                        });
                    } else {
                        layer.msg('更新失败，上线日期不在系统设置的范围内，请重新设置！', {
                            icon: 0, // 使用 icon:0 显示为感叹号图标
                            skin: 'layui-layer-danger', // 使用 layui-layer-molv 作为警告风格背景
                            time: 3000 // 显示时间为3秒
                        });
                        catalogDeleteTableIns.reload();
                    }

                } else {
                    // 发送更新请求
                    $.ajax({
                        url: '/dms/api/catalogDeleteUpdate',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            id: row.catalog_delete_id,
                            field: field,
                            value: value
                        }),
                        success: function (res) {
                            if (res.status !== 'success') {
                                layer.msg('更新失败: ' + res.message);
                                catalogDeleteTableIns.reload();
                            } else {
                                layer.msg('更新成功!');
                                catalogDeleteTableIns.reload();
                            }
                        }
                        , error: function (xhr, status, error) {
                            layer.msg('Error: ' + xhr.status + ' ' + xhr.statusText);
                            catalogDeleteTableIns.reload();
                        }
                    });
                }
            });

            // 添加按钮事件
            $('#addBtn').click(function () {
                var index = layer.open({
                    type: 1,
                    title: '添加 菜单删除 信息',
                    area: '475px',
                    content: $('#catalogDeleteFormId').html()
                });
                form.render();

                // 初始化时加载下拉框数据
                $.ajax({
                    url: '/dms/api/getCatalogDeleteOnlineDate',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 0) {
                            var html = '<option value="">直接或搜索选择</option>';
                            $.each(res.data, function (index, item) {
                                html += '<option value="' + item.online_date + '">' + item.online_date + '</option>';
                            });
                            $('#online_date_template').html(html);
                            // 重新渲染表单
                            form.render('select');
                        }
                    },
                    error: function () {
                        layer.msg('数据加载失败');
                    }
                });

                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
                // 表单提交事件
                form.on('submit(formSubmit)', function (data) {
                    var method = data.field.catalog_delete_id ? 'PUT' : 'POST';
                    var url = data.field.catalog_delete_id ? '/dms/api/catalogDelete/' + data.field.catalog_delete_id : '/dms/api/addCatalogDelete';
                    $.ajax({
                        url: url,
                        type: method,
                        contentType: 'application/json',
                        data: JSON.stringify(data.field),
                        success: function (res) {
                            if (res.status === 'error') {
                                layer.msg(res.message);
                            } else {
                                layer.closeAll();
                                layer.msg('操作成功');
                                catalogDeleteTableIns.reload();
                            }
                        },
                        error: function (xhr) {
                            layer.msg('操作失败: ' + xhr.responseJSON.msg);
                        }
                    });
                    return false;
                });
            });

            // 表格操作事件 触发单元格工具事件
            table.on('tool(catalogDeleteTableLayFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'delete') {
                    layer.confirm('确定删除吗？', function (index) {
                        $.ajax({
                            url: '/dms/api/catalogDelete/' + data.catalog_delete_id,
                            type: 'DELETE',
                            success: function (res) {
                                if (res.status === 'error') {
                                    layer.msg(res.message);
                                } else {
                                    layer.closeAll();
                                    layer.msg('已删除');
                                    catalogDeleteTableIns.reload();
                                }
                            }
                        });
                    });
                }
            });

            // 数据导出
            form.on('submit(export)', function (data) {
                layer.confirm('导出当前查询条件的所有数据吗？', function (index) {
                    layer.close(index);
                    layer.msg('正在生成文件...', {icon: 16, time: 1500});
                    // 创建隐藏的iframe实现下载
                    setTimeout(function () {
                        // HTML-数据导出-业务字段-定义变量
                        var event2 = $('#event').val();
                        var saas_location2 = $('#saas_location').val();
                        var operation2 = $('#operation').val();
                        var jalor_location2 = $('#jalor_location').val();

                        var principal2 = $('#principal').val();
                        var online_date2 = $('#online_date').val();
                        var created_by2 = $('#created_by').val();

                        var exportUrl = '/dms/api/exportCatalogDelete?';

                        // HTML-数据导出-业务字段-拼接到URL
                        exportUrl += 'event' + '=' + encodeURIComponent(event2) + '&';
                        exportUrl += 'saas_location' + '=' + encodeURIComponent(saas_location2) + '&';
                        exportUrl += 'operation' + '=' + encodeURIComponent(operation2) + '&';
                        exportUrl += 'jalor_location' + '=' + encodeURIComponent(jalor_location2) + '&';

                        exportUrl += 'principal' + '=' + encodeURIComponent(principal2) + '&';
                        exportUrl += 'online_date' + '=' + encodeURIComponent(online_date2) + '&';
                        exportUrl += 'created_by' + '=' + encodeURIComponent(created_by2);

                        var iframe = document.createElement('iframe');
                        iframe.style.display = 'none';
                        iframe.src = exportUrl;
                        document.body.appendChild(iframe);

                        // 下载完成后移除iframe
                        setTimeout(function () {
                            document.body.removeChild(iframe);
                            layer.msg('导出成功！');
                        }, 2000);
                    }, 1500);
                });
                return false;
            });

        });
    </script>
{% endblock %}
